<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Main页面</title>
    <link href="" th:href="@{/webjars/bootstrap/4.3.1/css/bootstrap.css}" rel="stylesheet">
    <link href="" th:href="@{/webjars/bootstrap/4.3.1/js/bootstrap.js}" rel="stylesheet">
    <link href="" th:href="@{/webjars/jquery/3.4.1/jquery.min.js}" rel="stylesheet">

</head>
<body class="text-center">

<!--引入topbar-->
<div th:replace="commons/bar ::topbar"></div>

<!--创建2:10的2列,左边放导航栏,右边放内容-->
<div class="row" style="height: 800px">
    <div class="col-sm-2" style="background-color: aliceblue">
        <!--引入左侧垂直导航sidebar-->
        <div th:replace="commons/bar :: sidebar"></div>
    </div>
    <div class="col-sm-10">
        <!--右侧内容区-->
       <h2>右侧内容区,放个表格</h2>
        <table class="table">
            <thead>
            <tr>
                <th>Firstname</th>
                <th>Lastname</th>
                <th>Email</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>John</td>
                <td>Doe</td>
                <td>john@example.com</td>
            </tr>
            <tr>
                <td>Mary</td>
                <td>Moe</td>
                <td>mary@example.com</td>
            </tr>
            <tr>
                <td>July</td>
                <td>Dooley</td>
                <td>july@example.com</td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

<!--<nav class="navbar navbar-expand-sm bg-dark navbar-dark">-->
    <!--<a class="navbar-brand" href="#">导航</a>-->
    <!--<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">-->
        <!--<span class="navbar-toggler-icon"></span>-->
    <!--</button>-->
    <!--<div class="collapse navbar-collapse" id="collapsibleNavbar">-->
        <!--<ul class="navbar-nav">-->
            <!--<li class="nav-item">-->
                <!--<a class="nav-link" href="#">链接</a>-->
            <!--</li>-->
            <!--<li class="nav-item">-->
                <!--<a class="nav-link" href="#">链接</a>-->
            <!--</li>-->
            <!--<li class="nav-item">-->
                <!--<a class="nav-link" href="#">链接</a>-->
            <!--</li>-->
        <!--</ul>-->
    <!--</div>-->
<!--</nav>-->

<!--<div class="container" style="margin-top:30px">-->
    <!--<div class="row">-->
        <!--<div class="col-sm-4">-->
            <!--<h2>关于我</h2>-->
            <!--<h5>我的照片:</h5>-->
            <!--<div class="fakeimg">这边插入图像</div>-->
            <!--<p>关于我的介绍..</p>-->
            <!--<h3>一些链接</h3>-->
            <!--<p>说明文本</p>-->
           <!---->
            <!--<hr class="d-sm-none">-->
        <!--</div>-->
        <!--<div class="col-sm-8">-->
            <!--<h2>标题</h2>-->
            <!--<h5>副标题</h5>-->
            <!--<div class="fakeimg">图像</div>-->
            <!--<p>一些文本..</p>-->
            <!--<p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>-->
            <!--<br>-->
            <!--<h2>标题</h2>-->
            <!--<h5>副标题</h5>-->
            <!--<div class="fakeimg">图像</div>-->
            <!--<p>一些文本..</p>-->
            <!--<p>菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！菜鸟教程，学的不仅是技术，更是梦想！！！</p>-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->


<footer>
    <div class="jumbotron text-center" style="margin-bottom:0;height: 10px">
        <p>底部内容</p>
    </div>
</footer>
</body>
</html>